import { Component, PureComponent } from "react";


class Home extends PureComponent {
  render() {
    return <h2>{`姓名：${this.props.name} age: ${this.props.age} region: ${this.props.region}`}</h2>
  }
}

class About extends PureComponent {
  render() {
    return <h2>{`姓名：${this.props.name} age: ${this.props.age} region: ${this.props.region}`}</h2>
  }
}

//1. 定义高阶组件  把公共的props写在这里
function enhanceRegionProps(WrappedComponent) {
  return props => {
    return <WrappedComponent {...props} region={"中国"} />
  }
}

//2. 传入需要公共props的组件
const EnhanceHome = enhanceRegionProps(Home)
const EnhanceAbout = enhanceRegionProps(About)

class App extends Component {
  render() {
    return (
      <div>
        {/* <Home name={'yzh'} age={18} />
        <About name={'哈哈哈哈'} age={22} /> */}

        {/* 3. 使用处理过的组件 */}
        <EnhanceHome name={'yzh'} age={18} />
        <EnhanceAbout name={'哈哈哈哈'} age={22} />
      </div>
    )
  }
}

export default App